<template>
  <div class="app-container">
    <xm-table ref="xmtable" :url='url'>

      <template v-slot:search>
        <el-select v-model="where.type" placeholder="类型" class="searchLine">
          <el-option
            v-for="item in optionType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-date-picker
                class="searchLine"
                v-model="where.time_frame"
                type="daterange"
                range-separator="至"
                start-placeholder="开始到账时间"
                end-placeholder="结束到账时间">
        </el-date-picker>

        <el-select v-model="where.step" placeholder="状态" class="searchLine">
          <el-option
            v-for="item in optionStep"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-input v-model="where.mch_billno" placeholder="输入红包订单号" style="width: 200px;" class="filter-item" @keypress.enter.native="table.where(where)" />

        <el-button class="filter-item" type="primary" icon="el-icon-search" @click.native="searchBtn" >搜索</el-button>
      </template>

      <!--表格主内容-->
      <template v-slot:table="slotProps">
        <el-table
                :key="slotProps.tableKey"
                v-loading="slotProps.listLoading"
                :data="slotProps.list"
                border
                highlight-current-row
                style="width: 100%;"
        >
          <el-table-column label="类型" width="100px">
            <template slot-scope="scope">
              <el-tag type="primary">
                <span v-if="scope.row.type == 'form'">表单</span>
                <span v-if="scope.row.type == 'project'">红包</span>
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="领取用户头像" width="110px">
            <template slot-scope="scope">
              <el-image
                  :src="scope.row.member.avatar_url"
                  fit="cover"
                  :preview-src-list="[scope.row.member.avatar_url]"
                  lazy
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>

          <el-table-column label="微信昵称" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.member.nickname }}</span>
            </template>
          </el-table-column>

          <el-table-column label="红包订单号">
            <template slot-scope="scope">
              <span>{{ scope.row.mch_billno }}</span>
            </template>
          </el-table-column>

          <el-table-column label="金额" width="150">
            <template slot-scope="scope">
              <span>{{ +scope.row.total_amount }}</span>
            </template>
          </el-table-column>

          <el-table-column label="失败原因">
            <template slot-scope="scope">
              <span>{{ scope.row.err_code_des }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="100px">
            <template slot-scope="scope">
              <el-tag type="primary">
                <span v-if="+scope.row.step == 1">未处理</span>
                <span v-else-if="+scope.row.step == 2">已打款</span>
                <span v-else-if="+scope.row.step == 3">打款失败</span>
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>

          <el-table-column label="到账时间" width="200px">
            <template slot-scope="scope">
              <span>{{ new Date(scope.row.arrival_time*1000).format('yyyy-MM-dd hh:mm:ss') }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="primary" size="small" v-if="row.step == 1 || row.step == 3" @click="refishOrder(row.order_id)">重试打款</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </xm-table>

  </div>
</template>

<script>
import xmTable from "@/components/xmTable"
//import { constants } from 'fs';

export default {
  name: "projectList",
  components: {
    xmTable,
  },
  data() {
    return {
      url: api.order,     //请求地址
      table: {},            //获取table内部方法
      where: {              //搜索用关键字
        mch_billno: '',
        type: '',
        step: '',
        time_frame: ''
      },
      optionType: [
        { value: 'form', label: '表单' },
        { value: 'project', label: '红包任务' }
      ],
      optionStep: [
        { value: '2', label: '已打款' },
        { value: '3', label: '打款失败' }
      ],
      nowId: 0,              //当前id
    }
  },
  created() {
    const vm = this
    //vm.getOrder()
  },
  mounted() {
    const vm = this
    vm.table = vm.$refs.xmtable
  },
  computed: {

  },
  methods: {
    // 获取数据接口
    async getOrder(id) {
      id = id || '0'
      const vm = this
      let url = api.order + '/' + id
      vm.$axios.get(url)
        .then((res) => {
          vm.sizeForm.type = res.type
          vm.sizeForm.avatar_url = res.avatar_url
          vm.sizeForm.nickname = res.nickname
          vm.sizeForm.mch_billno = res.mch_billno
          vm.sizeForm.total_amount = res.total_amount
          vm.sizeForm.step = res.step
          vm.sizeForm.create_time = res.create_time
          vm.sizeForm.arrival_time = res.arrival_time
        })
    },

    // 重试订单列表
    refishOrder(order_id) {
      const id = order_id || '0'
      const vm = this
      let url = api.order + '/' + id

      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      vm.$axios.put(url)
        .then((res) => {
          vm.table.where()
          loading.close()
        })
    },

    // 表格搜索
    searchBtn() {
      const vm = this
      var postData = {
        mch_billno: vm.where.mch_billno,
        type: vm.where.type,
        step: vm.where.step,
        start_time: vm.where.time_frame[0] ? new Date(vm.where.time_frame[0]).format('yyyy/MM/dd') : '',
        end_time: vm.where.time_frame[1] ? new Date(vm.where.time_frame[1]).format('yyyy/MM/dd') : ''
      }
      vm.table.where(postData)
    }

  }
}
</script>

<style scoped>
  .searchLine {
    margin-bottom:10px;
    vertical-align: middle;
  }
  .btnLink {
    display: block;
    width:100%;
  }
</style>
